<template>
  <app-page>
    <div class="account_index">
      <div class="account_content">
        <div class="title">
          <img src="@/assets/account/zhanghulishi.png" style="width: 28px; height: 28px" alt="" />
          <div class="AlibabaPuHuiTi_2_85_" style="margin-left: 8px">{{languageJson.user.accountHistory}}</div>
        </div>
        <Search :formdata="formdata" @change="changeformdata" :earningsdata="earningsdata" />
        <Table :data="accountList" :loading="accountLoading" />
      </div>
      <div class="account_footer">
        <div>
          <el-pagination
            v-model:current-page="page.page"
            v-model:page-size="page.page_size"
            :size="size"
            :disabled="disabled"
            :background="background"
            layout="total, prev, pager, next,sizes"
            :total="page.total"
            @size-change="getaccountlist()"
            @current-change="getaccountlist()"
          />
        </div>
      </div>
    </div>
  </app-page>
</template>

<script setup>
import Search from './components/Search.vue'
import Table from './components/Table.vue'
import { http } from '@/utils/http'
import { onMounted } from 'vue'
const languageJson = inject('languageJson')
const languageType = inject('languageType')
const accountList = ref([])
const accountLoading = ref(false)
const formdata = ref({
  search: '',
  time: ['2024-11-01', '2024-12-29'],
  begin_time: '2024-11-01',
  end_time: '2024-12-29',
})
const page = ref({
  page: 1,
  page_size: 20,
  total: 0,
})

const earningsdata = ref({
  today_earnings: 0,
  yesterday_earnings: 0,
})

const changeformdata = () => {
  page.value = {
    page: 1,
    page_size: 20,
    total: 0,
  }
  getaccountlist()
}

const getaccountlist = () => {
  accountLoading.value = true
  formdata.value.begin_time = formdata.value.time[0]
  formdata.value.end_time = formdata.value.time[1]
  let body = {
    search: formdata.value.search,
    begin_time: formdata.value.begin_time,
    end_time: formdata.value.end_time,
    page: page.value.page,
    page_size: page.value.page_size,
  }
  http.post('/order/order_list', body).then(res => {
    accountList.value = res.data.list
    page.value.total = res.data.total
    accountLoading.value = false
  })
}

const getearnings = () => {
  http.get('/order/earnings').then(res => {
    earningsdata.value.today_earnings = res.data.today_earnings
    earningsdata.value.yesterday_earnings = res.data.yesterday_earnings
  })
}

const getBeijingWeekDates = () => {
  const now = new Date()

  // 获取当前年份和月份
  const year = now.getFullYear()
  const month = now.getMonth() // 当前月份（从0开始，即0是1月，11是12月）

  // 获取本月1号的日期
  const firstDayOfMonth = new Date(year, month, 1)
  firstDayOfMonth.setHours(12, 0, 0, 0) // 设置为12:00:00中午

  // 获取本月最后一天的日期
  const lastDayOfMonth = new Date(year, month + 1, 0) // 获取下月的第0天，即为本月的最后一天
  lastDayOfMonth.setHours(12, 0, 0, 0) // 设置为12:00:00中午

  // 格式化日期函数
  const formatDate = date => {
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    return `${year}-${month}-${day}`
  }

  // 返回日期范围
  let result = {
    start: `${formatDate(firstDayOfMonth)}`,
    end: `${formatDate(lastDayOfMonth)}`,
  }
  formdata.value.time = [result.start, result.end]

  formdata.value.begin_time = result.start
  formdata.value.end_tim = result.end
}
onMounted(() => {
  getaccountlist()
  getearnings()
  getBeijingWeekDates()
})
</script>

<style lang="scss" scoped>
.account_index {
  display: flex;
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
}

.account_content {
  width: 100%;
  height: calc(100% - 40px);
  padding: 18px 16px 16px 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.account_footer {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.title {
  display: flex;
  align-items: center;

  div {
    font-size: 24px;
    font-weight: bold;
    color: #000;
  }
}
</style>

<style>
.account_footer .el-pager li {
  margin-left: 8px;
  border-radius: 0;
}
.account_footer .el-pager li,
.account_footer .el-pagination__total,
.account_footer .el-pagination__sizes .el-select__selected-item {
  font-family: AlibabaPuHuiTi_2_65_;
  font-size: 14px;
  color: #000;
}
.account_footer .el-pager .is-active {
  color: #fff;
  background-color: #3711d8;
}
.account_footer .el-pager li:last-child {
  margin-right: 8px;
}
</style>
